<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>10.小艺术家：形状#8</title>
    <link rel="stylesheet" type="text/css" href="../../res/index.css" />
    <script type="text/javascript" src="../../js/blockly_compressed.js"></script>
    <script type="text/javascript" src="../../js/javascript_compressed.js"></script>
    <script type="text/javascript" src="../js10/action_d2.js"></script>
    <script type="text/javascript" src="../js10/action_s.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-circle {
            width: 36px;
            height: 36px;
            text-align: center;
            padding: 6px 0;
            font-size: 16px;
            line-height: 1.428571429;
            border-radius: 18px;
            border: rgb(200,200,200) 2px solid;
        }
        .btn-circle.btn-lg {
            width: 50px;
            height: 50px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 25px;
        }
        .btn-circle.btn-xs {
            width: 6px;
            height: 6px;
            padding: 6px 6px;
            font-size: 5px;
            line-height: 1.33;
            border-radius: 35px;
        }
        .counter-text{
            text-anchor: end;
            font-size: 16px;
            font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
            fill: white;
            stroke: black;
            stroke-width: 1;
            cursor: default;
        }
    </style>

</head>
<body>
    <div class = "top">
        <ul>
            <li><a href="../../course1.html">课程分类</a></li>
            <li><a href="">项目</a></li>
            <li><a href="">关于</a></li>
            <div id="header-mid" class="col-lg-4" style="margin:5px;position: fixed;left: 25%;">
                <div style="margin-top: 8px;display:inline;">
                    <div class="col-lg-4"  style="padding: 8px 0px; text-align: center;display:inline;width: 30%;">
                        <a style="color: #ffffff; font-size: 16px" href="../../course1.html">课程10：小艺术家：形状</a>
                    </div>
                    <div class="col-lg-8" style="display: flex; flex-direction: row; background-color: rgb(244, 244, 244); border-radius: 5px; height: 40px; align-items: center; border:#b4b4b4 1px solid; width: 62%;">
                        <abbr title="1" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='../course1-10.html'" class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="2" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-10-2.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="3" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-10-3.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="4" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-10-4.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="5" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-10-5.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="6" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-10-6.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="7" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-10-7.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <button type="button" onclick="location.reload()" class="btn btn-default btn-circle" style="display: block; margin-left: 1px; margin-right: 2px">
                            8
                        </button>
                    </div>
                </div>
            </div>

        </ul>
    </div>
    <div data-radium="true" style="padding-left: 60px; padding-right: 10px; float: left; width: 100%; box-sizing: border-box; background-color: rgb(221, 221, 221); border-top-right-radius: 5px; border-top-left-radius: 5px;">
        <div data-radium="true" style="width: 100%; position: relative; float: left; height: 88px; margin-right: -300px;">
            <div class="csf-top-instructions" data-radium="true" style="padding: 5px 0px;">
                <div data-radium="true" style="position: relative;">
                    <div data-radium="true" style="background-color: white; border-radius: 10px; margin: 5px 0px; padding: 5px 76px 5px 10px; position: relative; border-style: dashed; border-width: 1px; border-color: white;">
                        <div style="overflow: hidden;">
                                <div  style="float:left";><img src="../res10/artist.png" style="width: 50px height:50px"></div>
                                <div id = "hint">修改代码来完成一个图形！</div>
                            </div></div></div></div></div>
    </div>
    <div id="visualization" style="position:absolute;top: 140px;left: 0px; height: 480px;width: 1080px">
        <div id="gamePanel" style="position: absolute;margin-left:25px;margin-top:20px;width: 400px;height: 480px">
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                preserveAspectRatio="xMidYMid meet" viewBox="0 0 400 400" width="400" height="400">
                <defs>
                    <path d="M280.44 150L280 200" id="b3NjfFSURY"></path>
                    <path d="M45.09 254.49L95.09 254.49L95.09 304.49L45.09 304.49L45.09 254.49Z" id="crl49qbp"></path>
                    <clipPath id="clipa3rI2x9zp">
                        <use xlink:href="#crl49qbp" opacity="1"></use>
                    </clipPath>
                    <path d="M130 300L80 300.44" id="b1M3n7YfEO"></path>
                    <path d="M230 300L180 300.44" id="iGbsis8Ca"></path>
                    <path d="M280.44 250L280 300" id="cq5zvdfv"></path>
                    <path d="M40.86 320L40 70" id="a95o2MzEs"></path>
                    <path d="M360.86 320L360 70" id="c2IpxAmKk"></path>
                    <path d="M360 68.92L40 68.92" id="b1ctZrp1ez"></path>
                    <path d="M359.68 319.88L39.68 319.88" id="e2u1q1ji0x"></path>
                    <path d="M318.03 161.23L242.81 125.33" id="c60jldSh4"></path>
                    <path d="M316.32 124.47L244.52 162.94" id="b7CllVr13v"></path>
                    <path d="M248.79 68.92L248.79 35.59" id="d5gWZfDaY2"></path>
                    <path d="M157.34 68.92L171.87 35.59L157.34 68.92Z" id="awJ0tJCn"></path>
                    <path d="M211.19 67.21L196.97 37.29L184.42 66.3L171.87 37.29" id="b2phGZ8niV"></path>
                    <path d="M249.65 36.44L269.31 36.44L269.31 51.82L249.65 51.82L249.65 36.44Z" id="euoHsR4gl"></path>
                </defs>
                <g>
                    <g>
                        <g>
                            <g>
                                <use xlink:href="#b3NjfFSURY" opacity="1" fill-opacity="0" stroke="#808080"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g id="artist" clip-path="url(#clipa3rI2x9zp)" opacity="1">
                                <image
                                    xlink:href=""
                                    x="0" y="0" width="50" height="50"
                                    transform="matrix(1 0 0 1 45.08547008546998 254.48717948717947)"></image>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#b1M3n7YfEO" opacity="1" fill-opacity="0" stroke="#808080"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#iGbsis8Ca" opacity="1" fill-opacity="0" stroke="#808080"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#cq5zvdfv" opacity="1" fill-opacity="0" stroke="#808080"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#a95o2MzEs" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#c2IpxAmKk" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#b1ctZrp1ez" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#e2u1q1ji0x" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#c60jldSh4" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#b7CllVr13v" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#d5gWZfDaY2" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#awJ0tJCn" opacity="1" fill-opacity="0" stroke="#040404"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#b2phGZ8niV" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <use xlink:href="#euoHsR4gl" opacity="1" fill="#ffffff" fill-opacity="1"></use>
                            <g>
                                <use xlink:href="#euoHsR4gl" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="5" stroke-opacity="1"></use>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <button id="runButton" onclick="runButtonClick()"
                style="background-color:cyan;font-size: 20px;display: inline;">运行</button>
        </div>

        <div id="blocklyDiv" style="height: 480px;width: 600px;margin-left: 450px;margin-top: 20px;"></div>
    </div>
    <xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">
        <block type="moveforward_up"></block>
        <block type="moveforward_down"></block>
        <block type="moveforward_left"></block>
        <block type="moveforward_right"></block>
        <block type="jump"></block>
    </xml>

    <xml xmlns="http://www.w3.org/1999/xhtml" id="workspaceBlocks" style="display:none">
        <block type="start" id="1" x="38" y="20"></block>
    </xml>
    <script src="../js10/workspace.js"></script>
    <script src="../js10/game8/game.js"></script>
</body>

</html>